<template>
	<div class="app-container">
		<div >
			<el-row :gutter="20">

				<el-col :span="8" :xs="24">
					<user-card>
						<el-card style="margin-bottom:20px;">
							<div slot="header" class="clearfix">
								<span>Account and security</span>
							</div>

							<div class="user-profile">
								<div class="box-center">
									<!-- <pan-thumb :image="control.controlImg" :height="'100px'" :width="'100px'" :hoverable="false">
										../assets/meeting.png
										<div>Hello</div>
										{{ control.controlName }}
									</pan-thumb> -->
									<pan-thumb :image="userInfo.staffImge" :height="'100px'" :width="'100px'" :hoverable="false">
										<div>Hello</div>
										GouDan
									</pan-thumb>
								</div>
								<div class="box-center">
									<div class="user-name text-center">{{ userInfo.staffName }}</div>
									<div class="user-role text-center text-muted">管理员</div>
								</div>
							</div>
						<el-form>
							<el-form-item label="手机">
								<el-input v-model="userInfo.staffPhone"></el-input>
							</el-form-item>
							<el-form-item label="邮箱">
								<el-input v-model="userInfo.staffMail"></el-input>
							</el-form-item>
							<el-form-item label="密码"  >
								<el-input v-model="pwd"></el-input>
							</el-form-item>
							
						</el-form>
						<span>
							<el-button style="display:block;margin:0 auto" type="primary" @click="updateStaff()">更 新 信 息</el-button>
						</span>


						</el-card>
					</user-card>
				</el-col>

				<el-col :span="16" :xs="24">
					<el-card>
					<el-table :data="log" border stripe>
					    <el-table-column type="index"></el-table-column>
					    <el-table-column label="登录方式" prop="logBrowser"></el-table-column>
					    <el-table-column label="登录设备" prop="logDevice"></el-table-column>
					    <!-- <el-table-column label="登录系统" prop="meetingSize"></el-table-column> -->
					    <el-table-column label="登录ip" prop="logIp"></el-table-column>
					    <el-table-column label="登录时间">
					        <template slot-scope="scope">
					            <div>
					                {{ $moment(scope.row.logTime).format('YYYY/MM/DD HH:mm:ss') }}
					            </div>
					        </template>
					    </el-table-column>
					</el-table>
						
						<span>
							<el-button style="display:block;margin:0 auto" type="primary" @click="seeAll">查 看 全 部</el-button>
						</span>

					</el-card>
				</el-col>

			</el-row>
		</div>
	</div>
</template>

<script>
	import qs from 'qs';
	import PanThumb from '../PanThumb/index.vue'
	import draggable from 'vuedraggable'
	export default {
		components: {
			PanThumb
		},
		data() {
			return {
				userInfo:JSON.parse(localStorage.getItem("userInfo")),
				log: [{}],
				activeTab: 'activity',
				pwd:"***********"
			}
		},
		created() {
			this.getInfo()
		},
		methods: {
			async getInfo(){
				const { data: res } = await this.$http.post('/newtenlog')
				if (res.code !== 100) {
					return this.$message.error(res.message)
				}else{
					this.log=res.extend.result
					console.log(this.log)
				}
			},
		    async updateStaff(){
				this.userInfo.staffPwd = this.pwd
				console.log(this.userInfo)
				const { data: res } = await this.$http.post('/updateStaff',this.userInfo)
				if (res.code !== 100) {
					return this.$message.error(res.message)
				}else{
					localStorage.removeItem('userInfo') 
					localStorage.setItem('userInfo',JSON.stringify(this.userInfo));
					this.pwd = "***********"
					return this.$message.success("更新成功!!!")
					
				}

			},
			seeAll(){

			}
		}
	}
</script>
<style lang="scss" scoped>
	.drag-box {
		display: flex;
		user-select: none;
	}

	.drag-box-item {
		flex: 1;
		background-color: white;
		margin-right: 16px;
		border-radius: 6px;
		border: 1px #e1e4e8 solid;
	}

	.item-title {
		padding: 8px 8px 8px 12px;
		font-size: 14px;
		line-height: 1.5;
		color: #24292e;
		font-weight: 600;
	}

	.app-container {
		padding: 20px;
		background-color: white;
	}

	.box-center {
		margin: 0 auto;
		display: table;
	}

	/* .text-muted {
  color: #777;
} */

	.user-profile {
		.user-name {
			font-weight: bold;
		}

		.box-center {
			padding-top: 10px;
		}

		.user-role {
			padding-top: 10px;
			font-weight: 400;
			font-size: 14px;
		}

		.box-social {
			padding-top: 30px;

			.el-table {
				border-top: 1px solid #dfe6ec;
			}
		}

		.user-follow {
			padding-top: 20px;
		}
	}

	.user-bio {
		margin-top: 20px;
		color: #606266;

		span {
			padding-left: 4px;
		}

		.user-bio-section {
			font-size: 14px;
			padding: 15px 0;

			.user-bio-section-header {
				border-bottom: 1px solid #dfe6ec;
				padding-bottom: 10px;
				margin-bottom: 10px;
				font-weight: bold;
			}
		}
	}
</style>
